<template>
	<view class="container">
		<!-- 顶部导航栏 -->
		<view class="header">
			<view class="header-logo">
				<image src="/static/logo.png" mode="aspectFit"></image>
			</view>
			<view class="header-search">
				<u-search :show-action="false" placeholder="搜索" :clearabled="true" shape="round"></u-search>
			</view>
			<view class="header-icons">
				<view class="icon-item">
					<image src="/static/logo.png" mode="aspectFit"></image>
				</view>
				<view class="icon-item">
					<image src="/static/logo.png" mode="aspectFit"></image>
				</view>
				<view class="icon-item">
					<image src="/static/logo.png" mode="aspectFit"></image>
				</view>
			</view>
		</view>

		<!-- 新人专享区域 -->
		<view class="new-user-offer">
			<image src="/static/image/home_1.png" mode="aspectFit" class="offer-image"></image>
			<view class="content">
				<text class="title">新人专享</text>
				<text class="description">6,200 USDT 大礼包，注册即刻领取</text>
				<u-button text="登录/注册" shape="circle" class="login-button"></u-button>
			</view>
		</view>

		<!-- 功能图标区 -->
		<view class="function-icons">
			<u-grid :border="false" col="5">
				<u-grid-item v-for="(item, index) in functionIcons" :key="index">
					<view class="icon-wrapper">
						<u-icon :name="item.icon" size="24"></u-icon>
					</view>
					<text class="grid-text">{{ item.text }}</text>
				</u-grid-item>
			</u-grid>
		</view>

		<!-- 活动广告区 -->
		<view class="activity-ads">
			<view class="ad-item large">
				<swiper class="swiper" :indicator-dots="false" :autoplay="true" :interval="3000" :duration="500"
					@change="onLargeAdChange">
					<swiper-item v-for="(item, index) in largeAds" :key="index">
						<view class="large-ad-content">
							<view class="ad-text">
								<text class="ad-title">{{ item.title }}</text>
								<text class="ad-description">
									{{ item.subtitle }} {{ item.highlight }}
									<text class="yellow-text">{{ item.highlightEmphasis }}</text>
									{{ item.highlightEnd }}
								</text>
							</view>
							<image :src="item.image" mode="aspectFit" class="ad-image"></image>
						</view>
					</swiper-item>
				</swiper>
				<text class="ad-page">{{ currentLargeAd }}/{{ largeAds.length }}</text>
			</view>
			<view class="ad-column">
				<view class="ad-item small" style="margin-bottom: 10rpx;">
					<swiper class="swiper" :indicator-dots="false" :autoplay="true" :interval="3000" :duration="500"
						@change="onSmallAdChange">
						<swiper-item v-for="(item, index) in smallAds" :key="index">
							<view class="small-ad-content">
								<text class="ad-label">{{ item.label }}</text>
								<image :src="item.logo" mode="aspectFit" class="coin-logo"></image>
								<text class="coin-name">{{ item.name }}</text>
								<text class="coin-rate">{{ item.rate }}</text>
							</view>
						</swiper-item>
					</swiper>
					<text class="ad-page">{{ currentSmallAd }}/{{ smallAds.length }}</text>
				</view>
				<view class="ad-item small">
					<view class="small-ad-content">
						<image src="/static/logo.png" mode="aspectFit" class="coin-logo"></image>
						<text class="ad-title">盘前交易</text>
						<text class="ad-subtitle">X Empire 火热交易中</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 最新消息 -->
		<view class="latest-news">
			<u-icon name="volume" size="16" color="#333"></u-icon>
			<swiper class="news-swiper" vertical :autoplay="true" :interval="3000" :duration="1000"
				:indicator-dots="false">
				<swiper-item v-for="(item, index) in newsItems" :key="index">
					<view class="news-item">{{ item }}</view>
				</swiper-item>
			</swiper>
			<u-icon name="arrow-right" size="14" color="#333"></u-icon>
		</view>

		<!-- 币种列表 -->
		<view class="coin-list">
			<up-tabs :list="tabsList" :current="activeTab"
				:activeStyle="{ color: 'black', fontWeight: 'bold', fontSize: '36rpx' }"
				:inactiveStyle="{ color: '#606266', fontSize: '34rpx' }"></up-tabs>
			<view class="coin-type">
				<u-tag :text="'现货'" bgColor="#f5f5f5" color="#606266" borderColor="white" size="mini" />
				<u-tag :text="'合约'" bgColor="#fff" color="#606266" borderColor="white" size="mini" />
			</view>

			<u-checkbox-group>
				<view v-for="(group, groupIndex) in coins" :key="groupIndex" class="coin-group">
					<view class="coin-item" v-for="coin in group" :key="coin.symbol">
						<view class="coin-info">
							<text>{{ coin.symbol }}/{{ coin.price }}</text>
						</view>
						<u-checkbox v-model="selectedCoins" />
					</view>
				</view>
			</u-checkbox-group>
			<text
				style="text-align: center;color: #00a3e8;display: block;margin-top: 10rpx;font-size: 24rpx;">加入自选</text>
		</view>

		<!-- 新币预告 -->
		<view class="new-coin-announcement">
			<view class="announcement-title">新币预告</view>
			<view class="announcement-content">
				<view class="top-row">
					<view class="row">
						<image src="/static/logo.png" class="coin-logo" />
						<view class="coin-info">
							<text class="coin-name">X</text>
							<text class="coin-description">X Empire</text>
							<text class="coin-tag">
								<text class="tag" style="margin-right: 10rpx;">现货</text>
								<text class="tag">合约</text>
							</text>
						</view>
					</view>
					<text class="countdown">00D : 08 : 17 : 36</text>
				</view>
				<view class="bottom-row">
					<text class="locked-info">锁仓 BTC 和 ETH，瓜分 1,469,700,000 X!</text>
					<u-icon name="arrow-right" size="14" color="#333"></u-icon>
				</view>
			</view>
		</view>

		<!-- 跟单 -->
		<view class="follow-container">
			<view class="follow-title">跟单</view>
			<view class="follow-content">
				<u-tag :text="'现货'" bgColor="#f5f5f5" color="#606266" borderColor="white" size="mini" />
				<u-tag :text="'合约'" bgColor="#fff" color="#606266" borderColor="white" size="mini" />
				<u-tag :text="'策略'" bgColor="#fff" color="#606266" borderColor="white" size="mini" />
			</view>
			<swiper class="follow-swiper" :indicator-dots="false" :autoplay="false" :interval="3000" :duration="500">
				<swiper-item v-for="(item, index) in followProducts" :key="index">
					<view class="follow-item">
						<view class="follow-item-content">
							<view class="follow-avatar-left">
								<image :src="item.logo" class="avatar" />
								<view class="avatar-info">
									<view class="avatar-name">
										<text class="avatar-name-text">{{ item.name }}</text>
										<image src="/static/logo.png" mode="aspectFit" class="avatar-level"></image>
									</view>

									<view class="avatar-increase">
										<u-icon name="man-add" size="14"></u-icon>
										<text class="avatar-fnum-text">{{ item.fnum }}</text>
										<text class="avatar-ftotal-text">/{{ item.ftotal }}</text>
									</view>
								</view>
							</view>
							<view class="follow-avatar-right">跟单</view>
						</view>
						<view class="follow-item-content">
							<view class="follow-increase-left">
								<text class="follow-increase-text">ROI</text>
								<text class="follow-increase-rate-text">{{ item.rate }}</text>
								<text class="follow-increase-increase-text">{{ item.increase }}</text>
							</view>
							<view class="follow-increase-right">
								<!-- <canvas :ref="'chart-' + index" width="200" height="100"></canvas> -->
							</view>
						</view>
					</view>
				</swiper-item>
			</swiper>
		</view>

		<!-- 理财产品 -->
		<view class="financial-products">
		</view>

		<!-- 热搜资产 -->
		<view class="hot-assets">
			<!-- 热搜资产表 -->
		</view>

		<!-- 即将锁仓 -->
		<view class="upcoming-lock">
			<!-- 锁仓信息 -->
		</view>

		<!-- 福利中心 -->
		<view class="welfare-center">
			<text>福利中心</text>
			<!-- 福利内容 -->
		</view>

		<!-- 底部导航栏 -->
		<view class="footer">
			<!-- 这里需要使用uni-app的tabBar组件 -->
		</view>
	</view>
</template>

<script>
import home from './home.js'
export default home
</script>

<style lang="scss" scoped>
@import './home.scss';
</style>

<style scoped>
/deep/ .u-tabs__wrapper__nav__item {
	padding: 0 20rpx 0 0;
}

/deep/ .u-tabs__wrapper__nav__line {
	display: none;
}
</style>
